<script setup lang='ts'>
defineOptions({ name: 'AppSportsOutrightInfoSkeleton' })
</script>

<template>
  <div class="px-[8px] py-[16px] flex flex-col bg-[var(--color-bg-black-3)] rounded-[8px]">
    <BaseSkeleton class="mb-[12px]" animated="ani-opacity" width="120px" height="15px" />
    <BaseSkeleton class="mb-[14px]" animated="ani-opacity" width="232px" height="15px" />
    <div class="grid gap-x-[8px] gap-y-[10px] grid-cols-3">
      <div class="rounded-[8px] bg-[var(--color-bg-black-5)] flex items-center justify-between px-[8px] py-[12px]"
        v-for="i in 9">
        <BaseSkeleton animated="ani-opacity" width="32px" height="15px" />
        <BaseSkeleton animated="ani-opacity" width="32px" height="15px" />
      </div>
    </div>
    <div class="w-full h-[40px] mt-[10px] bg-[var(--color-bg-black-5)] rounded-[8px] flex justify-center items-center">
      <BaseSkeleton animated="ani-opacity" width="80px" height="15px" />
    </div>
  </div>
</template>

<style lang='scss' scoped></style>
